<!-- 子组件 -->
<template>
    <div class="back">
        这是子组件：
        <h2>姓名：{{ res.name }}</h2>
        <br>
        <button @click="btn">点击改变vuex仓库里的数据</button>
    </div>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { computed } from 'vue'

export default {
    setup() {
        // vue2 使用this.就可调用

        // 从vuex数据仓库里取数据
        const store = useStore()
        const res = computed(() => {
            console.log(store.state.name)
            return store.state.name
        })

        // 点击调用vuex，并且改变vuex仓库里的数据
        function btn() {
            // 异步调用
            // store.dispatch('sub')
            // 同步调用
            store.commit('trigger', '雷军') // {} [] 都可以
        }

        return { res, btn }

    }
}
</script>

<style scoped></style>